<template>
	<view>
		<view class="searchLayout">
			<u-search
				placeholder="请输入搜索内容"
				v-model="keyword"
				clearabled
				showAction
				animation
				focus
				@search="onSearch"
				@custom="onSearch"
				@clear="onClear"
			></u-search>
			<view class="search_history">
				<view class="title">历史搜索</view>
				<view
					class="historyList"
					v-if="goodsData.length == 0"
				>
					<view
						class="item"
						v-for="(item, index) in historyList"
						:key="item"
					>
						<view
							class="text"
							@click="clickText(item)"
						>
							{{ item }}
						</view>
						<view
							class="close"
							@click="onClose(index)"
						>
							<u-icon
								name="close"
								size="16"
								color="#999"
							></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="goodsLayout">
				<view
					class="item"
					v-for="pro in goodsData"
					:key="pro._id"
				>
					<product-item :item="pro"></product-item>
				</view>
			</view>
		</view>
		<pro-detail-popup></pro-detail-popup>
		<pro-select-specs></pro-select-specs>
		<view class="carOut">
			<car-layout v-if="buyNum > 0"></car-layout>
		</view>

		<u-empty
			mode="search"
			icon="https://cdn.uviewui.com/uview/empty/search.png"
			v-if="noData"
		></u-empty>
	</view>
</template>

<script>
const goodsCloudObj = uniCloud.importObject('my-mall-goods');
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			keyword: '',
			historyList: [],
			goodsData: [],
			noData: true
		};
	},
	onLoad() {
		this.historyList = uni.getStorageSync('historyList') || [];
	},
	methods: {
		onSearch() {
			this.historyList.unshift(this.keyword);
			// 去重
			this.historyList = [...new Set(this.historyList)];
			console.log(this.historyList);
			if (this.historyList.length > 5) this.historyList.splice(5);
			uni.setStorageSync('historyList', this.historyList);
			this.getData();
		},
		// 删除历史
		onClose(index) {
			// 删除数组中索引元素
			this.historyList.splice(index, 1);
			uni.setStorageSync('historyList', this.historyList);
		},
		async getData() {
			let res = await goodsCloudObj.searchGoods(this.keyword);
			this.goodsData = res.data;
			if (this.goodsData.length) {
				this.noData = false;
			} else {
				this.noData = true;
			}
			this.setNumValue();
		},
		setNumValue() {
			this.goodsData.forEach((item) => {
				this.$set(item, 'numvalue', 0);
			});
		},
		// 清空搜索框
		onClear() {
			this.keyword = '';
			this.goodsData = [];
			this.noData = true;
		},
		// 点击搜索历史文字
		clickText(value) {
			this.keyword = value;
			this.getData();
		}
	},
	computed: {
		...mapGetters(['buyNum', 'carsList'])
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100vh;
	background-color: $theme-back-color;
}
.searchLayout {
	padding: 30rpx;
	padding-bottom: 160rpx;
	.search_history {
		.title {
			margin-top: 30rpx;
		}

		.historyList {
			margin-top: 30rpx;
			@include flex-box-set(start);
			.item {
				@include flex-box();
				margin-right: 30rpx;
				background-color: #fff;
				font-size: 32rpx;
				padding: 10rpx 20rpx;
				color: #777;
				border-bottom: 1px solid $border-color-light;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
			}
		}
	}
}
.carOut {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
</style>
